<template>
    <el-table
        :data="TaskArrangementList"
        border
        style="width: 100%"
        :default-sort="{ prop: 'id', order: 'ascending' }"
    >
        <el-table-column prop="id" label="序号" width="60"/>
        <el-table-column prop="name" label="任务名称" width="200"/>
        <el-table-column prop="type" label="任务性质" width="100"/>
        <el-table-column prop="duration" label="任务时限" width="99"/>
        <el-table-column prop="startDate" label="任务开始日期" width="180"/>
        <el-table-column prop="process" label="任务进度状态" width="150"/>
        <el-table-column prop="resultDescription" label="任务结果描述" width="150"/>
        <el-table-column prop="createTime" label="任务创建时间" width="180"/>
        <el-table-column label="操作" width="375" align="center">
            <template #default="scope">
                <el-button type="primary" @click="setDuration(scope.row.id)">设置任务</el-button>
                <el-button type="primary" @click="getTaskArrangementDetail(scope.row.id)">任务详情</el-button>
                <el-button type="danger" @click="deleteById(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="demo-pagination-block" style="margin-left: 500px">
        <el-pagination
            v-model:current-page="pageNum"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 15, 20]"
            :small="true"
            :background="true"
            layout="sizes, prev, pager, next, total"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
    <el-dialog
        v-model="assignDialogVisible"
        title="设置任务"
        @close="handleAssignDialogClose"
    >
        <span>任务名称</span><el-input v-model="name" class="ml-5" style="width: 250px;"/><p/>
        <span>任务时限</span><el-input-number min="1" class="ml-5"  v-model="duration"/><p/>
        <span>任务结果描述</span><el-input v-model="resultDescription" class="ml-5"  style="width: 250px;"/>

        <div slot="footer" style="margin-top: 10px">
            <el-button @click="handleAssignDialogClose">取消</el-button>
            <el-button type="primary" @click="assignTask">确定</el-button>
        </div>
    </el-dialog>

    <el-dialog
        v-model="taskArrangementDetailDialogVisible"
        title="任务详情"
        @close="handleTaskArrangementDetailDialogClose"
    >
        <span>任务名称:  </span>{{taskArrangement.name}}<p/>
        <span>任务结果描述:  </span>{{taskArrangement.resultDescription}}<p/>
        <span>任务是否设置时限:  </span>{{taskArrangement.isSet == 1 ? '是' : '否'}}<p/>
        <span>任务进度百分比:  </span>{{taskArrangement.processRate}}<p/>
        <span>任务进度:  </span>{{taskArrangement.process}}<p/>
        <span>任务开始时间:  </span>{{taskArrangement.startDate}}<p/>
        <span>安排任务团队id:  </span>{{taskArrangement.teamId}}<p/>


        <div slot="footer" style="margin-top: 10px">
            <el-button @click="handleTaskArrangementDetailDialogClose">确定</el-button>

        </div>
    </el-dialog>


</template>

<script lang="ts" setup>
import {Delete} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import {ElMessage, ElTable} from "element-plus";
import request from "@/utils/request";

const taskArrangementDetailDialogVisible = ref(false)
const TaskArrangementList = ref([])
const duration = ref<number>()
const name = ref<string>('')
const assignDialogVisible = ref(false);
const resultDescription = ref<string>('')
const handleAssignDialogClose = () => {
    assignDialogVisible.value = false;
}

interface TaskArrangement {
    id: number;
    taskId: number;
    teamId: string;
    type: string;
    startDate: Date; // 使用 TypeScript 内置的 Date 类型来表示 LocalDateTime
    process: string;
    processRate: string;
    isArrange: number;
    isSet: number;
    duration: number;
    resultDescription: string;
    name: string;
}

const pageNum = ref(1)
const pageSize = ref(5)
const total = ref(0)
const multipleSelection = ref<TaskArrangement[]>([])
const taskArrangementId = ref<number>()
const taskArrangement = ref<TaskArrangement>()


const deleteById = (id: number)=> {
    deleteHandler(id.toString())
}

const deleteHandler= (ids: string) =>{
    request({
        url:`/api/taskArrange/delete/${ids}`,
        method:"delete"
    }).then((res) =>{
        if(res.code == "200"){
            ElMessage.success('删除成功')
            loadTasks()
        }else ElMessage.error(res.msg)
    }).catch(err =>{
        console.log('err', err)
    })
}

const assignTask = () =>{
    taskArrangement.value.id = taskArrangementId.value
    taskArrangement.value.duration = duration.value
    taskArrangement.value.name = name.value
    taskArrangement.value.resultDescription = resultDescription.value
    request({
        url:`/api/taskArrange/update/${taskArrangement.value?.id}`,
        method:"put",
        data:taskArrangement.value
    }).then(res =>{
        if(res.code == "200"){
            ElMessage.success('设置成功')
            loadTasks()
        }else ElMessage.error(res.msg)
        assignDialogVisible.value = false
    }).catch(err =>{
        console.log('err', err)
    })
}


const setDuration = (id: number) => {
    taskArrangementId.value = id
    loadTaskDetail(id).then(res =>{
        taskArrangement.value = res.data
        duration.value = taskArrangement.value?.duration
        name.value = <string>taskArrangement.value?.name
        resultDescription.value = <string>taskArrangement.value?.resultDescription
    }).catch(err =>{
        console.log('err', err)
    })
    assignDialogVisible.value = true
}

const loadTaskDetail = (id:number) => {
    return request({
        url: `/api/taskArrange/${id}/form`,
        method: 'get',
    }).catch(err =>{
        console.log('err', err)
    })
}

const load = async () => {
    return  await request({
        url: '/api/taskArrange/page',
        method: 'get',
        params: {
            pageNum: pageNum.value,
            pageSize: pageSize.value
        }
    }).catch(err =>{
        console.log('err', err)
    })
}

const getTaskArrangementDetail = (id:number)=>{
    loadTaskDetail(id).then(res=>{
        taskArrangement.value = res.data
        console.log(taskArrangement.value)
    }).catch(err=>{
        console.log('err', err)
    })
    taskArrangementDetailDialogVisible.value = true
}

const handleTaskArrangementDetailDialogClose = () =>{
    taskArrangementDetailDialogVisible.value = false
}



const loadTasks= () =>{
    load().then(res =>{
        TaskArrangementList.value = res.data.list
        total.value = res.data.total
    })
}
const handleSizeChange = () =>{
    loadTasks()
}
const handleCurrentChange = () =>{
    loadTasks()
}

onMounted(() =>{
    loadTasks()
})

</script>


<style scoped>
.ml-5{
    margin-left: 25px;
    margin-top: 10px;
}
</style>